<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Forms</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/button/new/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/form/default/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/popup/default/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/dropdown/blue/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .DemoBlock
    {
      border: 1px solid #D0D0D0;
      border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
      padding: 15px;
      margin: 0 0 .5em 10px;
      overflow: hidden;
      position: relative;
    }
    .DemoBlock H2
    {
      font-size: 80%;
      font-weight: normal;
      background: #EEE;
      margin: -15px -15px 10px -15px;
      padding: 2px 2px 2px 1.5em;
      /*text-align: center;*/
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>
  <script type="text/javascript" src="../../locale/en/form.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: Forms</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">

    basis.require('basis.dom');
    basis.require('basis.dom.event');
    basis.require('basis.data');
    basis.require('basis.ui.popup');
    basis.require('basis.ui.form');
    basis.require('basis.ui.button');

    
    // import names
    var getter = Function.getter;

    var DOM = basis.dom;
    var Event = basis.dom.event;
    var nsData = basis.data;
    var nsForm = basis.ui.form;
    var nsButton = basis.ui.button;

    function createBlock(header){
      return DOM.insert(DOM.get('demo-container'), DOM.createElement('.DemoBlock', DOM.createElement('H2', header)));
    }


    new nsForm.Field.Text({
      container: createBlock('Text Field')
    });

    new nsForm.Field.Textarea({
      container: createBlock('Textarea Field'),
      maxLength: 20
    });

    new nsForm.Field.Select({
      childNodes: [
        {
          title: 'Option 1',
          value: 1
        },
        {
          title: 'Option 2',
          value: 2
        },
        {
          title: 'Option 3',
          value: 3
        }
      ],
      container: createBlock('Select Field')
    });

    var property = new nsData.property.Property(1);

    new nsForm.Field.Combobox({
      childNodes: [
        {
          title: 'Combobox Item 1',
          value: 1
        },
        {
          title: 'Combobox Item 2',
          value: 2,
          selected: true
        },
        {
          title: 'Combobox Item 3',
          value: 3
        }
      ],
      property: property,
      title: 'Combobox Title',
      sample: 'Sample',
      container: createBlock('Combobox Field')
    });

    new nsForm.Field.RadioGroup({
      childNodes: [
        {
          title: 'Radio Item 1',
          value: 1
        },
        {
          title: 'Radio Item 2',
          value: 2
        },
        {
          title: 'Radio Item 3',
          value: 3
        }
      ],
      container: createBlock('RadioGroup Field')
    });

    var checkGroup = new nsForm.Field.CheckGroup({
      childNodes: [
        {
          title: 'Check Item 1',
          value: 1
        },
        {
          title: 'Check Item 2',
          value: 2
        },
        {
          title: 'Check Item 3',
          value: 3,
          selected: true
        }
      ],
      container: createBlock('CheckGroup Field')
    });

    // form


    var formContainer = createBlock('Form');

    var form = new nsForm.FormContent({
      childNodes: [
        {
          type: 'text',
          name: 'FirstName',
          title: 'First Name',
          minLength: 10
        },
        {
          type: 'text',
          name: 'LastName',
          title: 'Last Name'
        },
        {
          type: 'combobox',
          name: 'Gender',
          title: 'Gender',
          childClass: {
            titleGetter: Function.getter('data.title'),
            valueGetter: Function.getter('data.value')
          },
          childNodes: [
            { data: { value: 'Male', title: 'Male' } },
            { data: { value: 'Female', title: 'Female' } }
          ]
        },
        {
          type: 'checkbox',
          name: 'check',
          title: 'Some checkbox'
        }
      ],
      onSubmit: function(data){
        alert([
          'First Name: ' + data.FirstName, 
          'Last Name: ' + data.LastName, 
          'Gender: '  + data.Gender
        ].join('\n'));
      },
      container: formContainer
    });

    new nsButton.Button({
      caption: 'Submit',
      click: function(){
        form.submit();
      },
      container: formContainer
    });

    
  </script>
</body>

</html>
